<template>
  <el-card class="main-card">
    <div class="title">{{ this.$route.meta.menuName }}</div>
    <!-- 表格操作 -->
    <div class="operation-container" style="margin-top: 24px">
      <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="openModel(null)"
      >
        新增
      </el-button>
      <el-button
          type="danger"
          size="small"
          icon="el-icon-delete"
          :disabled="this.SeatIdList.length == 0"
          @click="isDelete = true"
      >
        批量删除
      </el-button>
      <div style="margin-left:auto;margin-top: 3px">
        <el-input
            v-model="keywords"
            prefix-icon="el-icon-search"
            size="small"
            placeholder="请输入座位号"
            style="width:200px"
            @keyup.enter.native="searchSeat"
        />
        <el-button
            type="primary"
            size="small"
            icon="el-icon-search"
            style="margin-left:1rem"
            @click="searchSeat"
        >
          搜索
        </el-button>
      </div>
    </div>
    <!-- 表格展示 -->
    <el-table
        border
        :data="SeatList"
        @selection-change="selectionChange"
        v-loading="loading"
    >
      <!-- 表格列 -->
      <el-table-column type="selection" width="55" />
      <!-- 座位号 -->
      <el-table-column prop="num" label="座位号" align="center" />
      <!-- 座位最大容量 -->
      <el-table-column prop="maxCapacity" label="最大容量" align="center" />
      <!-- 座位备注-->
      <el-table-column prop="remark" label="备注" align="center" />

      <!-- 列操作 -->
      <el-table-column label="操作" width="160" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="openModel(scope.row)">
            编辑
          </el-button>
          <el-popconfirm
              title="确定删除吗？"
              style="margin-left:1rem"
              @confirm="deleteSeat(scope.row.id)"
          >
            <el-button size="mini" type="danger" slot="reference">
              删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
        class="pagination-container"
        background
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="current"
        :page-size="size"
        :total="count"
        :page-sizes="[5, 10, 20]"
        layout="total, sizes, prev, pager, next, jumper"
    />
    <!-- 批量删除对话框 -->
    <el-dialog :visible.sync="isDelete" width="30%">
      <div class="dialog-title-container" slot="title">
        <i class="el-icon-warning" style="color:#ff9900" />提示
      </div>
      <div style="font-size:1rem">是否删除选中项？</div>
      <div slot="footer">
        <el-button @click="isDelete = false">取 消</el-button>
        <el-button type="primary" @click="deleteSeat(null)">
          确 定
        </el-button>
      </div>
    </el-dialog>
    <!-- 添加编辑对话框 -->
    <el-dialog :visible.sync="addOrEdit" width="30%">
      <div class="dialog-title-container" slot="title" ref="seatTitle" />
      <el-form label-width="80px" ref="addOrEditForm" size="medium" :model="seatForm" :rules="rules">
        <el-form-item label="座位号">
          <el-input v-model="seatForm.num" style="width:220px" />
        </el-form-item>
        <el-form-item label="最大容量">
          <el-input v-model="seatForm.maxCapacity" style="width:220px" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="seatForm.remark" style="width:220px" />
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addOrEdit = false">取 消</el-button>
        <el-button type="primary" @click="addOrEditSeat">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </el-card>
</template>

<script>

import {deleteSeatList, saveOrUpdateSeat} from "@/api/seat";
const {getSeatPage} = require("@/api/seat");
export default {
  name:"MyType",
  created() {
    this.listSeat();
  },
  data() {
    return {
      isDelete: false,
      loading: true,
      addOrEdit: false,
      keywords: null,
      SeatIdList: [],
      SeatList: [],
      seatForm: {
        id: null,
        num: null,
        maxCapacity:null,
        remark:""
      },
      current: 1,
      size: 10,
      count: 0,
      rules: {
        num: [
          { required: true, message: "座位号不能为空", trigger: "blur" }
        ],
        maxCapacity: [
          { required: true, message: "最大容量不能为空", trigger: "blur" }
        ],
      }
    };
  },
  methods: {
    selectionChange(SeatList) {
      this.SeatIdList = [];
      SeatList.forEach(item => {
        this.SeatIdList.push(item.id);
      });
    },
    searchSeat() {
      this.current = 1;
      this.listSeat();
    },
    sizeChange(size) {
      this.size = size;
      alert(size);
      this.listSeat();
    },
    currentChange(current) {
      this.current = current;
      this.listSeat();
    },
    async deleteSeat(id) {
      let param = [];
      if (id == null) {
        param = this.SeatIdList;
      } else {
        param = [id]
      }
      const res = await deleteSeatList(param);

        this.$notify.success({
          title: "成功",
          message: res.msg
        });
        await this.listSeat();

      this.isDelete = false;

    },
    async listSeat() {
      const param = {
        currentPage: this.current,
        pageSize: this.size,
        queryString: this.keywords
      };
      const res = await getSeatPage(param);
      this.SeatList = res.data.records;
      this.count = res.data.total;
      this.loading = false;
    },
    openModel(seat) {
      if (seat != null) {
        this.seatForm = JSON.parse(JSON.stringify(seat));
        this.$refs.seatTitle.innerHTML = "修改座位";
      } else {
        this.seatForm=[]
        this.$refs.seatTitle.innerHTML = "添加座位";
      }
      this.addOrEdit = true;
    },
     addOrEditSeat() {
       this.$refs.addOrEditForm.validate( (valid) => {
        if (valid){
          saveOrUpdateSeat(this.seatForm).then(res=>{
            this.$notify.success({
              title: "成功",
              message: res.msg
            });
            this.listSeat();
            this.addOrEdit = false;
          })
        }
        else {
          this.$notify.error({
            title: "失败",
            message: "校验未通过"

          });
        }

      })

    }
  }
};
</script>
